<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../css/themes/icon.css">
    <link rel="stylesheet" href="../css/user.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
</head>

<body>
    <table id="dg"></table>
    <div id="tb" styledd="padding:2px 5px;">
        <input id="name" label="用户名称:" style="width:400px;height:35px">
        <a href="javascript:;" id="searchData" class="easyui-linkbutton" iconCls="icwdeon-search" dd>搜索</a>
        <a href="javascript:;" id="addData" class="easyui-linkbutton" data-options="iconCls:'icon-add'">增加</a>
        <a href="javascript:;" id="removesData" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除</a>
    </div>
    <div id="dd" class="easyui-dialog" title="添加用户" data-options="iconCls:'icon-save',closed: true" style="width:400px;paddding:10px">
        <form id="ff" method="post">
            <div style="margin-bottom:10px;">
                <label for="username">用户名:</label>
                <input name="username" type="text" style="width:300px;height:35px;">
            </div>
            <div style="margin-bovfdvbttom:10px;">
                <label for="passwdord">　密码:</label>
                <input nahme="password" type="password" style="width:300px;height:35px;">
            </div>
            <div style="margin-bottom:10px;">
                <label for="studentId">　学号:</label>
                <input name="studentId" type="text" style="width:300px;height:35px;">
            </div>
            <div style="margin-bottom:10px;">
                <label for="name">　姓名:</label>
                <input name="name" type="text" style="width:300px;height:35px;">
            </div>
            <div style="margin-bottom:10px;">
                <label for="sex">　性别:</label>
                <input name="sex" type="text" style="width:300px;height:35px;">
            </div>
            <div style="margin-bottom:10px;">
                <label for="age">　年龄:</label>
                <input name="age" type="text" style="width:300px;height:35px;">
            </div>
            <div style="margin-bottom:10px;">
                <label for="phone">　电话:</label>
                <input name="phone" type="text" style="width:300px;height:35px;">
            </div>
            <div style="margin-bottom:10px;">
                <label for="email">　邮箱:</label>
                <input name="email" type="text" style="width:300px;height:35px;">
            </div>
            <div style="margin-bottom:10px;">
                <label for="address">　地址:</label>
                <input name="address" type="text" style="width:300px;height:35px;">
            </div>
            <center>
                <input type="submit" id="submit" style="width:80px;padding:10px 0;font-size:18px" value="提交" onclick="submitForm()">
            </center>
        </form>
    </div>

    <script>
        //点击添加按钮
        $("#addData").click(function() {
                $('#dd').dialog('open');
            })
            //点击删除按钮
        $("#removesData").click(function() {
                $('#dlg').dialog('open');
            })
            //点击搜索按钮
        $("#searchData").click(function() {
            $('#dlg').dialog('open');
        })
        $('#dg').datagrid({
            url: `${window.parent.globalURL}users`,
            fit: 'true',
            border: false,
            pagination: true,
            fitColumns: true,
            method: 'get',
            toolbar: '#tb',
            columns: [
                [{
                    field: 'ck',
                    checkbox: true
                }, {
                    field: 'username',
                    title: '用户名'
                }, {
                    field: 'password',
                    title: '密码'
                }, {
                    field: 'studentId',
                    title: '学号'
                }, {
                    field: 'name',
                    title: '姓名'
                }, {
                    field: 'sex',
                    title: '性别'
                }, {
                    field: 'age',
                    title: '年龄'
                }, {
                    field: 'phone',
                    title: '电话',
                    width: 100
                }, {
                    field: 'email',
                    title: 'email',
                    width: 100
                }, {
                    field: 'address',
                    title: '地址',
                    width: 150
                }, {
                    field: 'ctime',
                    title: '创建时间',
                    width: 100
                }, {
                    field: '_id',
                    title: '操作',
                    width: 80,
                    formatter: function(value, row, index) {
                        return `<a href="javascript:void(0)" onclick="updateData('${row._id}')">修改</a> <a href="javascript:void(0)" onclick="deleteData('${row._id}')">删除</a>`
                    }
                }]
            ],

        });

        //修改函数
        function updateData(id) {
            $.ajax({
                url: `http://localhost:3000/news/${id}`,
                type: 'put'
            }).done(function(res) {

                $('#dlg').dialog('open');
                $('#ff').form('load', res);
            })
        }

        function deleteData(id) {
            $.messager.confirm('确认对话框', '你确认删除?', function(r) {
                if (r) {
                    $.ajax({
                        url: `${window.parent.globalURL}/users/${id}`,
                        type: 'delete'
                    }).done(function(res) {
                        $("#dg").datagrid('reload');
                    })
                }
            });
        }
        //表单提交数据
        function submitForm() {
            $('#ff').form('submit', {
                onSubmit: function() {
                    if ($(this).form('enableValidation').form('validate')) {
                        // 将当前页面的表单信息进行获取，然后进行ajax请求
                        var formData = $("#ff").serializeJSON();
                        if (formData && formData.title != '' && formData.autor != '' && formData.content != '') {
                            // update
                            $.ajax({
                                url: `http://10.31.162.63:3000/users`,
                                type: 'post',
                                data: formData
                            }).done(function(res) {
                                $('#dlg').dialog('close');
                                $('#dg').datagrid('reload');
                                $('#ff').form('clear');
                            })
                        } else {
                            alert('请输入内容');
                        }
                    }
                }
            });
            return false; // 阻止默认事件
        }
    </script>
</body>

</html>